<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
absolute绝对定位元素，如果含有overflow不为visible的父级元素，同时，该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明，则overflow对该absolute元素不起作用。
-->
<button id="button">点击给父容器设置translate</button>

<p style="width:96px; height:96px; border:2px solid #beceeb; overflow:hidden;">
    <img src="b.jpg" style="position:absolute;" />
</p>


<!--
然
无论是overflow容器还是嵌套子元素(绝对定位元素与overflow容器之间的元素)，只要有transform属性，就会hidden溢出的absolute元素。
-->
<script>
  button.onclick=function () {
    document.querySelector('p').style.transform = 'translateX(0)';
  }
</script>
</body>
</html>
